<template>
  <div>
    <div style="margin-bottom: 4px">
      <a-form-model layout="inline">
        <a-form-model-item label="每行显示个数">
          <a-select
            placeholder="请选择每行显示个数"
            v-model="config.num"
            style="width: 180px"
          >
            <a-select-option :value="3">3 </a-select-option>
            <a-select-option :value="4">4 </a-select-option>
            <a-select-option :value="6">6</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="标签布局">
          <a-slider
            style="width: 150px"
            v-model="config.labelCol"
            :min="1"
            :max="24"
        /></a-form-model-item>
        <a-form-model-item label="输入控件布局">
          <a-slider
            style="width: 150px"
            v-model="config.wrapperCol"
            :min="1"
            :max="24"
        /></a-form-model-item>
      </a-form-model>
    </div>

    <vxe-table
      row-key
      ref="searchTable"
      :data="config.columns"
      :height="height"
    >
      <vxe-table-column title="排序" width="53px" align="center">
        <template>
          <span class="drag-btn">
            <a-icon type="drag" />
          </span>
        </template>
      </vxe-table-column>
      <vxe-table-column title="新增" width="54px" align="center">
        <template #header>
          <a-button @click="add" size="small" type="primary">
            <a-icon type="plus" />
          </a-button>
        </template>
        <template v-slot="{ row }">
          <a-popconfirm
            title="确定删除查询配置?"
            ok-text="确定"
            cancel-text="取消"
            @confirm="del(row)"
          >
            <a-button size="small" type="danger">
              <a-icon type="delete"></a-icon>
            </a-button>
          </a-popconfirm>
        </template>
      </vxe-table-column>
      <vxe-table-column title="查询字段" width="200px">
        <template v-slot="{ row }">
          <a-select
            placeholder="请选择查询字段"
            v-model="row.field"
            style="width: 180px"
            @change="fieldChange(row)"
          >
            <a-select-option
              v-for="(item, i) in columns.filter((f) => f.isShow)"
              :key="i"
              :value="item.name"
              >{{ item.description }}</a-select-option
            >
          </a-select>
        </template>
      </vxe-table-column>
      <vxe-table-column title="标题" width="130px">
        <template v-slot="{ row }">
          <a-input placeholder="标题" v-model="row.title" />
        </template>
      </vxe-table-column>
      <vxe-table-column title="提示说明" width="180px">
        <template v-slot="{ row }">
          <a-input placeholder="提示说明" v-model="row.placeholder" />
        </template>
      </vxe-table-column>

      <vxe-table-column title="类型" width="170px">
        <template v-slot="{ row }">
          <a-input-group compact>
            <a-select
              style="width: 100px"
              v-model="row.type"
              placeholder="请选择类型"
              @change="typeChange(row, $event)"
            >
              <a-select-option value="input">文本框</a-select-option>
              <a-select-option value="number">数字</a-select-option>
              <a-select-option value="select">下拉框</a-select-option>
              <a-select-option value="radio">单选框</a-select-option>
              <a-select-option value="checkbox">复选框</a-select-option>
              <a-select-option value="datetime">时间</a-select-option>
              <a-select-option value="bool">是否</a-select-option>
            </a-select>
            <a-button @click="typeClick(row)">
              <a-icon type="setting"></a-icon>
            </a-button>
          </a-input-group>
        </template>
      </vxe-table-column>
      <vxe-table-column title="比较符" width="150px">
        <template v-slot="{ row }">
          <a-input-group compact>
            <a-select
              style="width: 100px"
              v-model="row.op"
              placeholder="请选择弹出"
            >
              <a-select-option
                v-for="(item, i) in row.ops"
                :key="i"
                :value="item.value"
                >{{ item.title }}</a-select-option
              >
            </a-select>
          </a-input-group>
        </template>
      </vxe-table-column>
    </vxe-table>
    <!-- 查询下拉配置 -->
    <search-select
      ref="searchSelect"
      :visible.sync="drawer.select.visible"
      @cancel="typeConfigClose"
      @ok="typeConfigSelectOk"
    ></search-select>

    <!-- 类型是否配置 -->
    <a-drawer
      width="700px"
      :visible="drawer.bool.visible"
      :zIndex="drawer.style.zIndex"
      title="是否配置"
      @close="typeConfigClose"
    ></a-drawer>

    <!-- 类型时间配置 -->
    <a-drawer
      width="700px"
      :visible="drawer.datetime.visible"
      :zIndex="drawer.style.zIndex"
      title="时间配置"
      @close="typeConfigClose"
    ></a-drawer>

    <!-- 类型数字配置 -->
    <a-drawer
      width="700px"
      :visible="drawer.number.visible"
      :zIndex="drawer.style.zIndex"
      title="数字配置"
      @close="typeConfigClose"
    ></a-drawer>
  </div>
</template>

<script>
import Sortable from "sortablejs";
import searchSelect from "./select";
export default {
  name: "search-index",
  components: {
    searchSelect,
  },
  data() {
    return {
      height: window.innerHeight - 110,
      opControls: {
        //比较符对应类型
        input: [
          { value: "cn", title: "包含" },
          { value: "eq", title: "等于" },
          { value: "ne", title: "不等" },
          { value: "bw", title: "开始于" },
          { value: "bn", title: "不开始于" },
          { value: "ew", title: "结束于" },
          { value: "en", title: "不结束于" },
          { value: "nc", title: "不包含" },
          { value: "nu", title: "空值" },
          { value: "nn", title: "非空值" },
        ],
        select: [
          { value: "eq", title: "等于" },
          { value: "ne", title: "不等" },
        ],
        bool: [
          { value: "eq", title: "等于" },
          { value: "ne", title: "不等" },
        ],
        datetime: [
          { value: "date", title: "等于" },
          { value: "daterange", title: "之间" },
          { value: "lt", title: "小于" },
          { value: "le", title: "小于等于" },
          { value: "gt", title: "大于" },
          { value: "ge", title: "大于等于" },
        ],
        number: [
          { value: "eq", title: "等于" },
          { value: "lt", title: "小于" },
          { value: "le", title: "小于等于" },
          { value: "gt", title: "大于" },
          { value: "ge", title: "大于等于" },
        ],
      },

      typeItem: {
        //d当前选中类型
        ops: [],
      },

      drawer: {
        style: {
          zIndex: 1020,
        },
        select: {
          visible: false,
        },
        number: {
          visible: false,
        },
        datetime: {
          visible: false,
        },
        bool: {
          visible: false,
        },
      },
    };
  },

  props: {
    columns: {
      type: Array,
    },
    config: {
      type: Object,
      default: {
        labelCol: 8,
        wrapperCol: 16,
        num: 3, //显示个数
        columns: [], //查询条件
      },
    },
  },
  methods: {
    fieldChange(row) {
      var column = this.columns.filter((f) => f.name == row.field);
      if (column.length > 0) {
        row.title = column[0].description;
        row.placeholder = "请输入" + row.title;
      }
    },

    /**
     * 拖拽
     */
    rowDrop() {
      let that = this;
      const xTable = this.$refs.searchTable;
      this.sortable1 = Sortable.create(
        xTable.$el.querySelector(".body--wrapper>.vxe-table--body tbody"),
        {
          handle: ".drag-btn",
          onEnd: ({ newIndex, oldIndex }) => {
            const currRow = that.config.columns.splice(oldIndex, 1)[0];
            that.config.columns.splice(newIndex, 0, currRow);
          },
        }
      );
    },

    /**
     * 新增
     */
    add() {
      this.config.columns.push({
        title: null,
        placeholder: "请输入",
        field: undefined,
        type: "input",
        typeConfig: null,
        ops: this.opControls.input,
        op: "cn",
      });
      this.rowDrop();
    },

    /**
     * 删除
     */
    del(row) {
      let spIndex = -1;
      this.config.columns.forEach((item, index) => {
        if (item._XID == row._XID) {
          spIndex = index;
        }
      });
      if (spIndex != -1) {
        this.config.columns.splice(spIndex, 1);
      }
    },

    /**
     * 类型点击
     */
    typeClick(row) {
      this.typeItem = row;
      switch (row.type) {
        case "select":
          this.drawer.select.visible = true;
          this.$refs.searchSelect.init(row.typeConfig);
          break;
        case "bool":
          this.drawer.bool.visible = true;
          break;
        case "datetime":
          this.drawer.datetime.visible = true;
          break;
        case "number":
          this.drawer.number.visible = true;
          break;
        default:
          this.$message.error("当前类型无配置");
          break;
      }
    },

    /**
     * 类型关闭
     */
    typeConfigClose() {
      this.drawer.select.visible = false;
      this.drawer.datetime.visible = false;
      this.drawer.number.visible = false;
      this.drawer.bool.visible = false;
    },

    /**
     * 类型下拉改变,改变比较符
     */
    typeChange(row, value) {
      this.typeItem = row;
      this.typeItem.ops = [];
      switch (value) {
        case "input":
          this.typeItem.ops = this.opControls.input;
          break;
        case "select":
          this.typeItem.ops = this.opControls.select;
          break;
        case "bool":
          this.typeItem.ops = this.opControls.bool;
          break;
        case "datetime":
          this.typeItem.ops = this.opControls.datetime;
          break;
        case "number":
          this.typeItem.ops = this.opControls.number;
          break;
        default:
          this.typeItem.ops = this.opControls.input;
          break;
      }
      this.typeItem.op = this.typeItem.ops[0].value;
    },

    /**
     * select下拉配置
     */
    typeConfigSelectOk(config) {
      this.typeItem.typeConfig = config;
      this.typeConfigClose();
    },
  },
};
</script>

<style lang="less" scoped>
.drag-btn {
  cursor: move;
}
</style>
